<template>

  <div class="adminManage">
    <el-card shadow="never">
      <div class="header">
        <div class="page-header">
          <el-page-header @back="goBack" content="管理用户" style="margin-bottom: 20px">
          </el-page-header>
        </div>

        <div class="buttons">
          <el-button  size="mini" @click="toAddAdmin">添加管理员</el-button>
        </div>

      </div>

      <el-table
          :data="AdminTable"
          style="width: 100%"
          stripe>
        <el-table-column
            prop="adminId"
            label="编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="adminName"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="adminSex"
            label="性别">
          <template slot-scope="scope">
            <span v-if="scope.row.adminSex == 0">女</span>
            <span v-else>男</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="adminPhone"
            label="账号">
        </el-table-column>
        <el-table-column
            prop="adminDepart"
            label="所属部门">
        </el-table-column>
      </el-table>

      <div style="padding: 10px 0">
        <el-pagination
            :page-sizes="[2, 5, 10, 20]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total
            :current-page=this.pageNum
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>


    </el-card>

  </div>


</template>

<script>
import {getAdminPage} from "@/api/allApi";

export default {
  name: "AdminManage",
  data() {
    return {
      AdminTable: [],
      pageSize:5,
      total:0,
      pageNum:1,
    }
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    getAdminPage() {
      getAdminPage({
        current:this.pageNum,
        pageSize:this.pageSize
      }).then(res => {
        this.AdminTable = res.data.data;
        this.total = res.data.total
      })
    },
    indexMethod(index) {
      // 当前页数 - 1 * 每页数据条数 + 1
      const page = this.pageNum // 当前页码
      const pagesize = this.pageSize // 每页条数
      return index + 1 + (page - 1) * pagesize
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize;
      this.getAdminPage();
    },
    handleCurrentChange(pageNum){
      this.pageNum=pageNum;
      this.getAdminPage();
    },
    toAddAdmin() {
      this.$router.push({path:'/adminLayout/adminBackground/addAdmin'})
    }
  },
  mounted() {
    this.getAdminPage()
  }
}
</script>

<style lang="less" scoped>

.adminManage {

  margin-top: 30px;

  .header {
    display: flex;
    justify-content: space-between;
  }

  .page-header {
    width: 20%;
  }

  .buttons {
    margin: 0px 0 10px 0;
  }


}


</style>